<template>
    <div class="compilationSummary-tab1">
        <div class="tableBox tableBox3">
            <el-table
                v-loading="tableLoading"
                :data="tableData0"
                height="85vh"
                style="width: 100%"
                class="tableTh28"
                border
                stripe
                :span-method="arraySpanMethod"
                ref="table"
            >
                <el-table-column
                    label="类别"
                    prop="class3"
                    class-name="first-title"
                    min-width="50"
                    fixed
                ></el-table-column>
                <el-table-column
                    label="类别"
                    prop="class1"
                    class-name="first-title"
                    min-width="50"
                    fixed
                ></el-table-column>
                <el-table-column
                    label="类别"
                    prop="class2"
                    class-name="second-title"
                    min-width="50"
                    fixed
                ></el-table-column>
                <el-table-column
                    label="类别"
                    prop="indexName"
                    class-name="third-title"
                    min-width="100"
                    fixed
                ></el-table-column>
                <el-table-column
                    v-for="(it, i) in newArr"
                    :label="it.label"
                    :key="i"
                >
                    <el-table-column
                        min-width="120"
                        v-for="(item, index) in it.children"
                        :key="index"
                        :label="item.horizonIndexName"
                        :prop="item.horizonIndexId + item.indexId"
                    ></el-table-column>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
import { mergeTableRow, mergeSpan } from "@/utils/mixin";
export default {
    name: "compilationSummary-tab2",
    props: {
        rowData: {
            type: Array,
            default: [],
        },
        colDefList: {
            type: Array,
            default: [],
        },
    },

    data() {
        return {
            spanArr: [],
            tableData0: [],
            tableData1: [],
            tableData2: [],
            colList: [],
            newArr: [],
            tableLoading: false,
            flag: 0,
        };
    },

    methods: {
        //table合并行
        arraySpanMethod({ row, column, rowIndex, columnIndex }) {
            // if(this.tableData0.length>0){
            if (
                columnIndex == 0 ||
                columnIndex == 1 ||
                columnIndex == 2 ||
                columnIndex == 3
            ) {
                return (
                    this.spanArr.length && this.spanArr[rowIndex][columnIndex]
                );
            }
            // }
        },

        init() {
            var that = this, 
                title = [];

            that.spanArr = mergeSpan(that.rowData, [
                "class3",
                "class1",
                "class2",
                "indexName",
            ]);
            that.rowData.map((it) => {
                it.dataList.map((item, i) => {
                    it[item.horizonIndexId + i] = item.indexValue;
                });
            });
            that.tableData0 = that.rowData;
            for(var i = 0; i < 36; i++) {
                that.colDefList[i]['indexId'] = i + '';
                if(i % 3 == 0) {
                    that.colDefList[i]
                    var obj = {
                      label: that.colDefList[i].acctMonth,
                      children: that.colDefList.slice(i, i + 3)
                    }
                    title.push(obj);
                }
            }
            console.log(title);
            that.newArr = title;
            that.$nextTick(() => {
                that.$refs.table.doLayout();
            });
        },
        classify(arr) {
            // this.newArr=arr;

            let newArr = [];
            this.flag = 0;

            arr.forEach((item, index) => {
                if (index === 0) {
                    newArr.push({
                        month: item.class1,
                        list: [item],
                    });
                } else {
                    if (arr[index].class1 === arr[index - 1].class1) {
                        console.log(this.flag);
                        newArr[this.flag].list.push(item);
                    } else {
                        this.flag += 1;
                        newArr.push({
                            month: item.class1,
                            list: [item],
                        });
                    }
                }
            });
            this.newArr = newArr;
            console.log(newArr);
        },
    },
};
</script>

<style lang="scss">
.compilationSummary-tab1 {
    .first-title.is-leaf {
        font-size: 0 !important;
        position: relative;
        border-right: 1px solid #d7e5fb !important;
        .cell {
            color: #d7e5fb;
        }
    }
    .second-title.is-leaf {
        font-size: 0 !important;
        position: relative;
        border-right: 1px solid #d7e5fb !important;
        .cell {
            color: #d7e5fb;
        }
    }
    .third-title.is-leaf {
        overflow: visible;
        .cell {
            transform: translateX(-60%);
            white-space: nowrap;
            overflow: visible;
        }
    }
    /deep/ .third-title .cell {
        text-align: center;
    }
}
</style>
